<template>
	<view>
		<view class="content">
			<view class="list" v-if="type==2">
				<view class="title" >
					<view>
						评分
					</view>
					<view class="title-1">
						综合评分：{{pingList[isSelected].fen}}
					</view>
				</view>
				<view class="tabs">
					<view class="tabs-1">
						<view v-for="(item, index) in pingList" :key="index" class="tabs-2"
							:class="{ 'active': isSelected === index }" @click="selectTab(index)">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="type==2">
				<view class="title">
					星级
				</view>
				<view class="con1">
					<view class="text" v-for="(item,index) in starList">
						{{item.xing_name}}：
						<u-rate :value="starInfo[index].xing" @change='rateChange($event,index)' active-color="#FF7681" inactive-color="#D9D9D9" gutter="10"></u-rate>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="title" v-if="type==1">
					标签
				</view>
				<view class="title" v-if="type==2">
					印象
				</view>
				<view class="tabs">
					<view class="tabs-1">
						<view v-for="(item, index) in tablist2" :key="index" class="tabs-2"
							:class="{ 'active': isSelected2.includes(item.id) }" @click="selectTab2(item.id)">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="type==2">
				<view class="title" @click="goPage('report')">
					反馈
					<u-icon name="arrow-right" size="14" color="#333333"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submitEva">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelected: 0,
				isSelected2: [],
	
				tablist2: [{
					id:1,
					name: '有耐心',
				}, {
					id:2,
					name: '机制',
				}, {
					id:3,
					name: '勇敢'
				}],
				starList:[],
				starInfo:[],
				pingList:[],
	
				id:0,
				type:0,
				
			};
		},
		onLoad(option) {
			this.type=option.type
			this.id=option.id
			// this.type=option.type
			this.getData()
		},
		methods: {
			getData(){
				this.getTages()
				this.getStar()
				this.getPing()
			},
			getTages(){
				this.rq.getData('daren/tags').then(res => {
					this.tablist2=res.data
				})
			},
			getStar(){
				this.rq.getData('daren/xing').then(res => {
					this.starList=res.data
					var starInfo=[]
					for(var item of res.data){
						starInfo.push({
							id:item.id,
							xing:5
						})
					}
					this.starInfo=starInfo
				
				})
			},
			getPing(){
				this.rq.getData('daren/ping').then(res => {
					this.pingList=res.data
				})
			},
			rateChange(e,index){
				this.starInfo[index].xing = e
			},
			submitEva(){
				var data={
					order_id:this.id,
					type:this.type,
					tag_ids:this.isSelected2.join(','),
					xing_ji:this.starInfo,
					ping_tag_id:this.pingList[this.isSelected].id
				};
				this.rq.getData('daren/evaluate',data).then(res => {
					uni.showToast({
						title:res.msg,
					})
					setTimeout(()=>{
						uni.navigateBack({
						    delta: 1 // 返回的页面数，默认为1，表示返回上一页
						});
					},1500);
					
				})				
			},
			selectTab(index) {
				this.isSelected = index;
			},
			selectTab2(id) {
				if(this.isSelected2.includes(id)){
					this.isSelected2 = this.isSelected2.filter(function(value) {
					    return value !== id;
					})
				}else{
					this.isSelected2.push(id)
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: `/subpages/myOrder/${url}?id=${this.id}`
				})
			},
			submit() {
				console.log('提交评价');
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin-top: 20rpx;
		width: 100%;

		.list {
			width: 84%;
			margin: 20rpx auto;
			padding: 30rpx;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;

			.title {
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-1 {
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 15px;
					letter-spacing: 0px;
					color: #FF7681;
				}
			}

			.con1 {
				margin: 40rpx 0 20rpx;

				.text {
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0px;
					color: #666666;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}
			}

			.tabs {
				background-color: #ffffff;
				margin: 40rpx 0 20rpx;

				.tabs-1 {
					display: flex;
					height: 50rpx;
					margin: 20rpx 0;
				}

				.tabs-2 {
					width: 120rpx;
					justify-content: center;
					align-items: center;
					display: flex;
					margin-right: 30rpx;
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0px;
					color: #FF7681;
					background: #FFEEEF;
					box-sizing: border-box;
					border: 1px solid #FF7681;
					border-radius: 22px;
				}

				.tabs-2.active {
					position: relative;
					line-height: 15px;
					transition: all 0.3s ease;
					border-radius: 22px;
					opacity: 1;
					background: #FF7883;
					border: 1px solid #FF7681;
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					letter-spacing: 0px;
					font-variation-settings: "opsz" auto;
					color: #FFFFFF;
					// padding: 0 10rpx;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}
</style>